class CarInfoList extends React.Component {
    constructor(props) {
        super(props);
        this.count = 0;
        this.page = 1;
        this.state = {
            list: ''
        }
    }

    componentDidMount() {
        this.updateList(1, 10);
    }

    updateList(page, pageSize) {
        let param = {};
        param.page = page;
        param.pageSize = pageSize;
        param.plateNumber = this.refs.plateNumber.value;
        param.type_code = this.props.typeCode;
        param.parkId = this.refs.parkSelectList.getDefValue();
        postJson('/car/carInfo/queryCarInfoList.x', $.param(param), (data)=> {
            console.log(data);
            this.count = data.size;
            this.page = param.page;
            this.setState({
                list: data.list
            });
        })
    }

    tbody() {
        if (this.state.list) {
            return this.state.list.map(function (array) {
                return (<tr>
                    <td>{array.plate_number}</td>
                    <td>{array.car_type}</td>
                    <td>{array.card_type}</td>
                    <td>{array.e_start_time.split(' ')[0]}&nbsp;至&nbsp;{array.e_end_time.split(' ')[0]}</td>
                    <td>{array.update_time}</td>
                    <td>
                        <Button size="xs" btnType="normal"
                                onClick={() => this.carInfo(array.id)}>详细信息</Button>
                    </td>
                </tr>)
            }.bind(this))
        }
    }

    carInfo(id) {

    }

    selectParkCallback(value) {
        this.updateList(1, 10);
    }

    selectCommCallback(commCode) {
        this.refs.parkSelectList.queryList(commCode);
    }

    render() {
        return <Frame header="车辆信息管理">
                <Form type="pane">
                    <Item>
                        <LayuiCommSelect
                            formLabelName="小区选择"
                            mask={['building', 'unit', 'floor', 'room']}
                            ref="buildingSelectList"
                            onChangeComm={(comm) => this.selectCommCallback(comm)}/>
                        <label className="layui-form-label">停车场选择</label>
                        <ParkSelectList ref="parkSelectList" isNotItem={true}
                                        selectCallback={(value) => this.selectParkCallback(value)}/>
                        <label className="layui-form-label">车牌号</label>
                        <div className="layui-input-inline">
                            <Input type="text" ref="plateNumber"/>
                        </div>
                        <Button btnType="normal" onClick={() => this.updateList(1, 10)}>查询</Button>
                    </Item>
                    <Item>
                        <Table ref="table" count={this.count}
                               pageOnClick={(page, pageSize) => this.updateList(page, pageSize)}>
                            <thead>
                            <tr>
                                <th width="150">车牌号</th>
                                <th width="200">车辆类型</th>
                                <th>卡类型</th>
                                <th>有效时间</th>
                                <th>更新时间</th>
                                <th width="50">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {this.tbody()}
                            </tbody>
                        </Table>
                    </Item>
                </Form>
        </Frame>
    }
}

ReactDOM.render(
    <CarInfoList/>,
    document.getElementById('example')
);
